.card_box {
	width: 694rpx;
	margin: 0 auto;
}

.card {
	display: flex;
	width: 694rpx;
	padding: 12rpx;
	border-radius: $uni-border-radius-base;
	background-color: $uni-bg-color;
	gap: 16rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease;
	margin-bottom: 16rpx;
	
	&:active {
		transform: scale(0.98);
	}
	
	.cover {
		width: 320rpx;
		height: 240rpx;
		border-radius: $uni-border-radius-base;
		overflow: hidden;
		position: relative;
		
		.image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			
			&:hover {
				transform: scale(1.05);
			}
		}
	}
	
	.info_box {
		flex: 1;
		.course_info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100%;
			padding: 8rpx 12rpx;
			
			.name {
				font-size: 30rpx;
				color: $uni-color-title;
				font-weight: 600;
				margin-bottom: 8rpx;
				line-height: 1.4;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
			}
			
			.des {
				font-size: 24rpx;
				color: $uni-text-color-grey;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				line-height: 1.5;
				margin-bottom: auto;
				opacity: 0.85;
			}
			
			.price_group {
				display: flex;
				align-items: baseline;
				gap: 8rpx;
				margin-top: 12rpx;
				
				.price {
					font-size: 32rpx;
					color: transparent;
					font-weight: 800;
					background: linear-gradient(90deg, #ff4b2b, #ff416c);
					-webkit-background-clip: text;
					background-clip: text;
				}
				
				.original_price {
					font-size: 20rpx;
					color: rgba(153, 153, 153, 0.7);
					margin-left: 8rpx;
				}
			}
		}
	}
}

.section_title {
	width: 694rpx;
	margin: 0rpx auto 24rpx;
	position: relative;
	
	.title_text {
		font-size: 36rpx;
		font-weight: 700;
		color: #333;
		display: flex;
		align-items: center;
		gap: 12rpx;
		
		&::before {
			content: '';
			width: 8rpx;
			height: 32rpx;
			background: linear-gradient(to bottom, #3c9cff, #5cadff);
			border-radius: 4rpx;
		}
		
		.highlight {
			background: linear-gradient(90deg, #3c9cff, #5cadff);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}
		
		.badge {
			font-size: 20rpx;
			background: linear-gradient(90deg, #ff416c, #ff4b2b);
			color: #fff;
			padding: 4rpx 12rpx;
			border-radius: 20rpx;
			margin-left: 12rpx;
			font-weight: normal;
		}
	}
	
	.subtitle {
		font-size: 24rpx;
		color: $uni-text-color-grey;
		margin-top: 8rpx;
		margin-left: 20rpx;
	}
}

.pay_section {
	.title_text {
		&::before {
			background: linear-gradient(to bottom, #3c9cff, #5cadff);
		}
		
		.highlight {
			background: linear-gradient(90deg, #3c9cff, #5cadff);
			-webkit-background-clip: text;
			background-clip: text;
		}
		
		.badge {
			background: linear-gradient(90deg, #3c9cff, #5cadff);
		}
	}
}